import React from 'react';
import ReactDOM from 'react-dom';
import './style.css';
// event
import emitter from '../../util/events';
// service
import { getClassData, getClassID, getHistory, getKeyworld } from '../../util/service';
// ant
import { Button, Form, Row, Col, Cascader, Input, Radio } from 'antd';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class CategoryModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            Cascader: [],
            History: [],
            KeyworldSelect: [],
            ulShow: false
        };
    }
    // 获取分类数据
    getData() {
        getClassData({ id: 0 })
            .then(response => {
                this.setState({
                    Cascader: response.Data
                })
            })
    }
    // 获取历史数据
    getHistory() {
        getHistory()
            .then(response => {
                this.setState({
                    History: response.Data.History
                })
            })
    }
    // 分类ID获取数据
    loadClassID = () => {
        getClassID({ id: this.props.form.getFieldValue('ClassID') })
            .then(response => {
                this.props.form.setFieldsValue({
                    "Class": response.Data.classValue
                })
            })
    }
    // render前请求数据
    componentWillMount() {
        setTimeout(() => {
            this.getData();
            this.getHistory();
        })
    }
    // render加载完成
    componentDidMount() {
        const KeyworldEle = ReactDOM.findDOMNode(this.refs.KeyworldEle).querySelector('input');
        KeyworldEle.addEventListener('blur', () => {
            this.setState({
                ulShow: false
            })
        })

        KeyworldEle.addEventListener('focus', () => {
            this.setState({
                ulShow: true
            })
        })

        emitter.once('submitModal', () => {
            console.log('CategoryModal')
        })
    }
    // RadioChange
    RadioChange = (e) => {
        this.props.form.resetFields(['Class', 'ClassID', 'Keyworld'])
    }
    // 改变分类数据
    CascaderChange = (value, selectedOptions) => {
        this.props.form.resetFields(['HistoricalChoice'])
    }
    // 连接>
    onLabel = (label) => {
        return label.join(' > ')
    }
    // 搜索关键字
    searchKeyworld = () => {
        const KeyworldEle = ReactDOM.findDOMNode(this.refs.KeyworldEle).querySelector('input');
        KeyworldEle.focus();
        getKeyworld({ value: this.props.form.getFieldValue('Keyworld') })
            .then(response => {
                this.setState({
                    KeyworldSelect: response.Data.keyworldClass
                })
                for( let i = 0; i < this.refs.keyworldLi.querySelectorAll('li').length; i++ ) {
                    this.refs.keyworldLi.querySelectorAll('li')[i].addEventListener('mousedown', (e) => {
                        console.log(e.target.getAttribute('value').split(','))
                    })
                }
            })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 4
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 20
                }
            }
        };

        const KeyworldSelect = this.state.KeyworldSelect.map((d, index) => <li key={index} value={d}>{d.join(' > ')}</li>);
        const ulShow = this.state.ulShow;

        return (
            <Form>
                <FormItem {...formItemLayout} label="当前选择">
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('Class')(
                                <Cascader
                                    // loadData={this.loadData}
                                    options={this.state.Cascader}
                                    onChange={this.CascaderChange}
                                    displayRender={this.onLabel}
                                    placeholder="请选择" />
                            )}
                        </Col>
                        <Col span={4}></Col>
                    </Row>
                </FormItem>

                <FormItem {...formItemLayout} label="分类ID">
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('ClassID')(
                                <Input placeholder="请输入" />)}
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={this.loadClassID}>加载</Button>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem {...formItemLayout} label="关键词">
                    <Row gutter={8}>
                        <Col span={20} style={{position: "relative"}} ref="KeyworldEle">
                            {getFieldDecorator('Keyworld')(
                                // <Select
                                //     mode="combobox"
                                //     placeholder="请输入"
                                //     defaultActiveFirstOption={false}
                                //     showArrow={false}
                                //     filterOption={false}
                                //     onChange={this.comboboxChange}
                                // >
                                //     {KeyworldSelect}
                                // </Select>
                                <Input/>
                            )}
                            
                            <ul ref="keyworldLi" className={ulShow ? "KeyworldUl" : "KeyworldUl hide"}>
                                {
                                    KeyworldSelect
                                }
                            </ul>
                        </Col>
                        <Col span={4}>
                            <Button type="primary" onClick={this.searchKeyworld}>搜索</Button>
                        </Col>
                    </Row>
                </FormItem>

                <FormItem {...formItemLayout} label="历史选择">
                    <Row gutter={8}>
                        <Col span={20}>
                            {getFieldDecorator('HistoricalChoice')(
                                <RadioGroup className="HistoricalChoice" onChange={this.RadioChange}>
                                    {
                                        this.state.History.map((el, index) => {
                                            return <Radio key={index} value={el}>{el.join(' > ')}</Radio>
                                        })
                                    }
                                </RadioGroup>
                            )}
                        </Col>
                    </Row>
                </FormItem>
            </Form>
        )
    }
}

export default Form.create()(CategoryModal)